<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/getquery.js"></script>
    <script src="./js/zepto.js"></script>
    <script src="./js/iscroll.Veb.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        html {
            font-size: 26.667vw;
        }

        header,
        footer {
            position: absolute;
            left: 0;
            width: 100%;
            line-height: .5rem;
            background: #F1F3F4;
            text-align: center;
            color: #333;
            font-size: 0.16rem
        }

        header {
            top: 0
        }

        footer {
            bottom: 0;

            display: flex;
            justify-content: center;
            align-items: center;

        }

        audio {
            width: 100%;
            outline: 0;
            background-color: #F1F3F4;

        }

        main {
            position: absolute;
            top: 0.5rem;
            bottom: 0.5rem;
            background: #f0f0f0;
        }

        #content_view {

            overflow-y: scroll;
        }

        .content {
            width: 3.75rem;
            text-align: center;
            margin: 0 auto;
        }

        .tip {
            line-height: .4rem;
            font-size: 0.14rem;
            text-align: center;
            color: #3b3b3b
        }

        #loading {
            background: url('http://www.vebcoder.cn/img/loading.4bbc20d4.jpg')center center no-repeat;
            background-color: #eeeeee;
            opacity: 0.8;
            background-size: 500px auto;
            /* 不透明度 */
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            display: none;
        }

        #head-img {
            /* padding: 5vw; */
            /* box-shadow: 0 0 0 .032rem; */
            border-radius: 0.08rem;
            /* height: 3.75rem; */
            width: 3.75rem;
        }

        #head-img img {
            width: 100%;
        }

        #foot_list {
            overflow-y: scroll;


        }

        #foot_list li {
            border-radius: 0.08rem;
            width: 100%;
            margin: .1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        #foot_list h4 {
            font-size: 0.1rem;
            overflow: hidden;
            white-space: nowrap;
            max-width: .48rem;
            overflow: hidden;
            white-space: nowrap;
        }

        #foot_list img {
            width: 0.5rem;
            border-radius: 50%;
        }

        #foot_list p {
            font-size: 0.14rem;
            max-width: 1rem;
            overflow: hidden;
            white-space: nowrap;
        }

        .Date {
            margin-right: .13rem;
        }

        #foot_list a {
            font-size: 0.14rem;
            max-width: 1rem;
            overflow: hidden;
            white-space: nowrap;
            text-decoration: none;
            color: rgb(85, 26, 139);
            transition: all .5s;
        }

        .watchMV {
            visibility: hidden;
        }

        .show {
            cursor: pointer;
        }

        .mv {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        我是固定头部
    </header>

    <main id="content_view">
        <div>
            <div class="content">
                <div class="tip">下拉刷新</div>
                <div id="head-img">
                    <!-- <img src="http://img3.kuwo.cn/star/albumcover/500/56/9/4197950304.jpg" alt=""> -->
                </div>
                <ul id="foot_list">
                </ul>
            </div>
        </div>

        <div id="loading"></div>
    </main>

    <footer>
        <audio src="" controls></audio>
    </footer>
</body>
<script>
    // console.log($("audio"));

    render();
    var pn = 1;
    function render() {
        var data = getQery();


        $("#loading").show();
        $.get("http://vebcoder.cn:9090/artist/artistMusic", {
            artistid: data.artistid,
            rn: 10,
            pn: 1
        }, function (res) {
            // console.log(res);
            var list = res.data.list
            // console.log(list);


            var html = "";
            var login = "";
            html += '<img src="' + list[0].albumpic + '">'
            for (var i = 0; i < list.length; i++) {
                if (list[i].hasmv == 1) {
                    login += '<li><img  src="' + list[i].albumpic + '"><a class="show" song-id="' + list[i].rid + '" >' + list[i].name + '</a><h4>' + list[i].artist + '</h4><P class="mv" song-id="' + list[i].rid + '">专辑</P><p class="Date">' + list[i].releaseDate + '</p></li>'
                } else {
                    login += '<li><img  src="' + list[i].albumpic + '"><a class="show" song-id="' + list[i].rid + '" >' + list[i].name + '</a><h4>' + list[i].artist + '</h4><P class="watchMV" song-id="' + list[i].rid + '">专辑</P><p class="Date">' + list[i].releaseDate + '</p></li>'
                }
            }
            $("#head-img").html(html);
            $("#foot_list").html(login);
            isc.refresh();
            $("#loading").hide();

            // console.log("下拉刷新没问题");

        })

    }
    function nextPage() {
        var data = getQery();
        pn++;
        $("#loading").show();
        $.get("http://vebcoder.cn:9090/artist/artistMusic", {
            artistid: data.artistid,
            rn: 10,
            pn: pn
        }, function (res) {
            // console.log("进入底部刷新");

            var list = res.data.list
            var html = "";
            var login = "";
            html += '<img src="' + list[0].albumpic + '">'
            for (var i = 0; i < list.length; i++) {

                if (list[i].hasmv == 1) {
                    login += '<li><img  src="' + list[i].albumpic + '"><a class="show" song-id="' + list[i].rid + '" >' + list[i].name + '</a><h4>' + list[i].artist + '</h4><P class="mv" song-id="' + list[i].rid + '">专辑</P><p class="Date">' + list[i].releaseDate + '</p></li>'
                } else {
                    login += '<li><img  src="' + list[i].albumpic + '"><a class="show" song-id="' + list[i].rid + '" >' + list[i].name + '</a><h4>' + list[i].artist + '</h4><P class="watchMV" song-id="' + list[i].rid + '">专辑</P><p class="Date">' + list[i].releaseDate + '</p></li>'
                }



            }
            $("#head-img").html(html);
            foot_list.innerHTML += login;

            isc.refresh();
            $("#loading").hide();

        })
    }

    var isc = new iScroll("content_view", {
        topOffset: 40,
        y: -40,
        onScrollMove: function () {

            if (this.y > 50) {
                this.minScrollY = 0;
                $(".tip").html("松开立即刷新")
            } else {
                this.minScrollY = -40;
                $(".tip").html("下拉刷新")
            }

        },
        onScrollEnd: function () {


            if (this.minScrollY == 0) {

                $(".tip").html("正在刷新中...")
                // 重新请求数据 渲染页面
                render();
            }
            if (this.y == this.maxScrollY) {
                // 触底
                nextPage();
            }
        }

    })
    // 获取播放
    $(".show").live("click", function () {
        var rid = $(this).attr("song-id");
        // console.log(rid);
        // http://vebcoder.cn:9090/url?format=mp3&rid=91303110&response=url&type=convert_url3&br=128kmp3&from=web

        $.get("http://vebcoder.cn:9090/url?format=mp3&rid=" + rid + "&response=url&type=convert_url3&br=128kmp3&from=web", function (res) {
            //  console.log(res);
            //  console.log(rid);
            // 需要转化为json对象


            var url = JSON.parse(res).url;
            $("audio").attr("src", url).css("buttom", 0);
            //  获取DOM对象下的play方法播放音频  $("audio")是一个集合get(index)获取集合中的DOM对象
            $("audio").get(0).play();
            // var audio = document.getElementsByTagName('audio')[0]
            // audio.play();
            // var audio = document.getElementsByTagName('audio')[0];
            // audio.currentTime audio.duration
            // var data = getQery();
            // $.get('http://vebcoder.cn:9090/artist/artistMusic', {
            //     artistid: data.artistid,
            //     rn: 10,
            //     pn: pn
            // }, function (res) {
            //     console.log(res);
                
            //     var list = res.data.list
            //     var show = $(this).list
            //     console.log(show);

                // if (audio.currentTime == show) {

                //     console.log(audio.currentTime);
                //     console.log(audio.duration);
                // }

            // })

        })



    })



    // 获取MV播放
    // http://vebcoder.cn:9090/url?rid=7149583&response=url&format=mp4%7Cmkv&type=convert_url

    $('.mv').live("click", function () {
        var rid = $(this).attr("song-id");
        $.get("http://vebcoder.cn:9090/url?rid=" + rid + "&response=url&format=mp4%7Cmkv&type=convert_url", function (res) {

            // var url = JSON.parse(res).url;
            // console.log(res);
            window.open(res);



        })
    })
</script>

</html>